<div class="button-item">
    <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveForm()" label="生成表单"></button>
    <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveUpdate()" label="保存"></button>
</div>
<div class="transaction-config-field-container">
    <p-table #dt [columns]="cols" [value]="fields" [scrollable]="true" [scrollHeight]="scrollHeight">
        <ng-template pTemplate="caption">
            <div style="position: absolute; top:8px;z-index: 1;">
                <p-dropdown [options]="tables" [(ngModel)]="tableName" placeholder="业务表名必须以“rec_”开头，如rec_xxx"
                    optionLabel="label" [showClear]="true" [filter]="tables.length > 5" [style]="{'width':'300px', 'text-align':'left'}" (onChange)="onTableChange($event)"></p-dropdown>
            </div>
            <div style="text-align: right;">
                <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
                <input type="text" pInputText size="50" placeholder="输入关键字查询..."
                    (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width:2.5em"></th>
                <th *ngFor="let col of columns" [ngStyle]="col.style" pReorderableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
            <tr [pReorderableRow]="rowIndex" style="height: 35px;">
                <td style="width:2.5em">
                    <i class="fa fa-bars" pReorderableRowHandle></i>
                </td>
                <ng-container *ngFor="let col of columns;">
                    <!--序号列不可编辑-->
                    <td *ngIf="col.field == 'displayOrder'" [ngStyle]="col.style" ><span [ngModel]="rowData.displayOrder">{{rowIndex + 1 }}</span></td>
                    <td *ngIf="col.field != 'displayOrder' && col.field != 'displayName' && col.field != 'componentType'  && col.field != 'visableFlag' && col.field != 'occupyRow' && col.field != 'isRequired'" [ngStyle]="col.style">{{ rowData[col.field] }}</td>
                    <!--字段填写列-->
                    <td pEditableColumn
                        *ngIf="col.field == 'displayName'"
                        [ngStyle]="col.style">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input type="text" [(ngModel)]="rowData[col.field]">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData[col.field]}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <!--组件类型-->
                    <td *ngIf="col.field == 'componentType'" [ngStyle]="col.style">
                        <p-dropdown [options]="componentTypes" [(ngModel)]="rowData[col.field]"
                                    [style]="{'width':'100%', 'border': 'none', 'border-radius': '0px'}" appendTo="body">
                        </p-dropdown>
                        <input hidden  [(ngModel)]="rowData[col.field]">
                    </td>
                    <!--可见标记-->
                    <td pEditableColumn *ngIf="col.field == 'visableFlag'" [ngStyle]="col.style">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                            </ng-template>
                            <ng-template pTemplate="output">
                                <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <!--占据行-->
                    <td *ngIf="col.field == 'occupyRow'" [ngStyle]="col.style">
                        <p-radioButton name="occupyRow{{rowIndex+1}}" value="1" label="一行一列" [(ngModel)]="rowData[col.field]" ></p-radioButton>
                            <p-radioButton name="occupyRow{{rowIndex+1}}" value="0" label="一行两列" [style]="{'margin-left':'25px', 'border': 'none', 'border-radius': '0px'}" [(ngModel)]="rowData[col.field]"></p-radioButton>
                    </td>
                    <!--是否必填-->
                    <td *ngIf="col.field == 'isRequired'" [ngStyle]="col.style">
                        <p-radioButton name="isRequired{{rowIndex+1}}" value="1" label="是" [(ngModel)]="rowData[col.field]" ></p-radioButton>
                        <p-radioButton name="isRequired{{rowIndex+1}}" value="0" label="否" [style]="{'margin-left':'25px', 'border': 'none', 'border-radius': '0px'}" [(ngModel)]="rowData[col.field]"></p-radioButton>
                    </td>
                </ng-container>
            </tr>
        </ng-template>
    </p-table>
</div>
